﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>在一张图中选择一个小框</title>

    <script src="../jquery/jquery-latest-pack.js" type="text/javascript"></script>

    <script src="imgAreaSelect.js" type="text/javascript"></script>
<script></script>
</head>
<body>


<div class="container">
<p>
<img id="ferret" src="http://img1.qq.com/news/pics/10953/10953811.jpg" alt="It's coming right for us!"
 title="It's coming right for us!" style="float: left; margin-right: 10px;" />
 


 
</p>
</div>


<script type="text/javascript">

//加入效果

function preview(img, selection)
{
  var scaleX = 100 / selection.width;
  var scaleY = 100 / selection.height;

  $('#ferret + div > img').css({
    width: Math.round(scaleX * 400) + 'px',
    height: Math.round(scaleY * 300) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}

$(document).ready(function () {
  $('<div><img src="'+$("#ferret").attr("src")+'" style="position: relative;" /></div>')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '200px',
      height: '200px'
    })
    .insertAfter($('#ferret'));
});

$(window).load(function () {
  $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
</script>
</body>
</html>
